{% extends "template/public_page_base.html" %}
{% block title %}Zxnn - Password Generator{% endblock %}

{% block style %}
<style type="text/css">
    label.error {
        display: inline;
    }

    .checkbox input[type="checkbox"] {
        margin-left: 0;
    }
</style>
{% endblock %}

{% block content %}
<h3>Password Generator</h3>
<form id="pwForm" class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Char Type：</label>
        <div class="controls">
            <label class="checkbox inline"><input type="checkbox" name="charType" id="charType01" value="C" checked>Uppercase</label>
            <label class="checkbox inline"><input type="checkbox" name="charType" id="charType02" value="c" checked>Lowercase</label>
            <label class="checkbox inline"><input type="checkbox" name="charType" id="charType03" value="N" checked>Number</label>
            <label class="checkbox inline"><input type="checkbox" name="charType" id="charType04" value="S">Special Characters</label>
            <label for="charType" class="error"></label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Length：</label>
        <div class="controls">
            <input type="text" name="txtLength" id="txtLength" class="input-mini" value="10" />
        </div>
    </div>
</form>
<div class="form-actions">  
    <button id="btnGenerate" class="btn">Generate</button>
</div>
<div> 
    <input type="text" name="txtPW" id="txtPW"  style="font-family: monospace; font-size: 32px; height: 36px;" />
</div>
{% endblock %}

{% block script %}
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="/script/password_genreator.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#pwForm").validate({
            debug: true,
            rules: {
                txtLength: {
                    required: true,
                    min: 8,
                    max: 16
                },
                charType: {
                    required: true,
                    minlength: 1
                }
            },
            messages: {
                txtLength: {
                    required: "Password Length required.",
                    min: "Password Length must between 8 and 16.",
                    max: "Password Length must between 8 and 16."
                },
                charType: {
                    required: "select at least one of Char Type."
                }
            },
            highlight: function(element) {
                $(element).closest('.control-group').addClass('error');
            },
            success: function(element) {
                $(element).closest('.control-group').removeClass('error');
            }
        });

        $('#btnGenerate').click(function() {
            if($("#pwForm").valid()) {
                var charType = 0;
                if($('#charType01').is(':checked')) {
                    charType = charType | 1;
                }
                if($('#charType02').is(':checked')) {
                    charType = charType | 2;
                }
                if($('#charType03').is(':checked')) {
                    charType = charType | 4;
                }
                if($('#charType04').is(':checked')) {
                    charType = charType | 8;
                }

                var length = parseInt($('#txtLength').val(), 10);
                var pw = stlh.generatePassword(charType, length);
                $('#txtPW').width(18*length).val(pw).select();
            }
        });
    });
</script>
{% endblock %}
